<template>
    <div class="com-chart-wrapper" style="width: 100%; height: 100%">
        <div
            style="width: 100%; height: 100%"
            :id="echarts"
            class="echarts"
            ref="echarts"
        ></div>
    </div>
</template>

<script>
export default {
    name: "BasicEchartsComponents",
    props: {
        // 接收父组件传递过来的信息
        chartOption: {
            type: Object,
            default: () => []
        }
    },
    data () {
        return {
            myChart: null
        };
    },
    computed: {
        echarts () {
            return "echarts" + Math.random() * 100000;
        }
    },
    mounted () {
        this.myChart = echarts.init(document.getElementById(this.echarts));
        this.myChart.setOption(this.chartOption);
    },
    methods: {},
    watch: {
        chartOption: {
            handler (n) {
                this.myChart.setOption(n);
            },
            deep: true
        }
    }
};
</script>

<style scoped lang="less">
.com-chart-wrapper {
    color: #666;
}
</style>
